@extends('Layout/personBase')

@section('title', '个人信息')

@section('css')
	
	<link href="{{asset('Home/css/infstyle.css')}}" rel="stylesheet" type="text/css">
	<style type="text/css"> 
	.email{
		border:0px solid #c00;
		width:200px;
	} 
	.email{
		star : expression( 
			onmouseover=function(){this.style.borderColor="#060"}, 
			onmouseout=function(){this.style.borderColor="#c00"})
	} 
	</style> 
	
@endsection

@section('right')
	<div class="user-info">
		<!--标题 -->
		<div class="am-cf am-padding">
			<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
		</div>
		<hr/>

		<!--头像 -->
		<div class="user-infoPic">


			
		@foreach ($users as $v)
			<div class="info-m">
				<div><b>用户名：<i>{{$v->name}}</i></b></div>
				<div class="vip">
	                  <span></span><a href="#">{{$state[$v->user_level]}}</a>
				</div>
			</div>
		</div>

		<!--个人信息 -->
		<div class="info-main">
		
			<form class="am-form am-form-horizontal">
				{{csrf_field()}}
				<div class="am-form-group">
					<label for="user-name2" class="am-form-label">昵称</label>
					<div class="am-form-content">
						<input type="text" id="user-name2" name="name" value="{{$v->name}}">
	                      <small>用于登录名，请牢记哦~！修改后须重新登录</small>
					</div>
				</div>

				<div class="am-form-group">
					<label class="am-form-label">性别</label>
					<div class="am-form-content sex">
						<label class="am-radio-inline">
							<input type="radio" name="sex" value="1" data-am-ucheck @if ($v->sex == 1) checked @endif> 男
						</label>
						<label class="am-radio-inline">
							<input type="radio" name="sex" value="2" data-am-ucheck  @if ($v->sex == 2) checked @endif> 女
						</label>
						<label class="am-radio-inline">
							<input type="radio" name="sex" value="3" data-am-ucheck  @if ($v->sex == 3) checked @endif> 保密
						</label>
					</div>
				</div>

				
				<div class="am-form-group">
					<label for="user-phone" class="am-form-label">电话</label>
					<div class="am-form-content">
						<p><input style="text" value="{{$v->phone}}" name="phone" ></p>

					</div>
				</div>
				<div class="am-form-group">
					<label for="user-email" class="am-form-label">电子邮件</label>
					<div class="am-form-content">
						<p><input style="text" value="{{$v->email}}" name="email" class="email"></p>

					</div>
					
				</div>
				
				
				<div class="info-btn">
					<div class="am-btn am-btn-danger modify">保存修改</div>
				</div>

			</form>
			@endforeach
		</div>
	</div>
			
@endsection

@section('bottom-js')
	<script type="text/javascript">
		$('.modify').click(function () { 

			var name = $('input[name="name"]').val();
			var sex = $('input[name="sex"]:checked').val();
			var phone = $('input[name="phone"]').val();
			var email = $('input[name="email"]').val();
			var token  = "{{csrf_token()}}";
			//console.log(token);
			$.ajax({ 
				url: "{{url('/Home/inforModify')}}",
				type: 'post',
				data: {'name':name, 'sex':sex, 'phone':phone, 'email':email, '_token':token},
				dataType: 'json',
				success:function (data) {
					console.log(data);
	                if (data.code == 2010) {
	                    alert(data.msg);
	                                    
	                    location.href = "{{url('/logout')}}";
	                    
	                } else if (data.code == 2000) {
	                   
	                   alert(data.msg);

	                } else {	
	                    alert(data.msg);
	                }     
	            },
	            error: function (errorText) {
	                var text = JSON.parse(errorText.responseText).errors;
	               
	                if (text) {
	                    for (var key in text) {
	                        alert(text[key][0]);
	                    }
	                } else {
	                        alert("未知错误");
	                }
	            }

			});

		})
	</script>
@endsection